<div class="content">
    <form nz-form>
        <nz-alert nzType="info" *ngIf="!labels || labels.length === 0" nzMessage="There is no label"></nz-alert>
        <nz-row *ngFor="let label of labels">
            <nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>Name</nz-form-label>
                    <nz-form-control>
                        <input nz-input type="text" name="{{label.name}}" placeholder="name" [(ngModel)]="label.name">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>Color</nz-form-label>
                    <nz-form-control>
                        <input nz-input type="text" name="color-{{label.name}}" placeholder="color" [(ngModel)]="label.color">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col [nzSpan]="1">
                <nz-form-item>
                    <nz-form-control>
                        <i nz-icon nzType="highlight" nzTheme="fill" [style.color]="label.color"></i>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col [nzSpan]="7">
                <nz-form-item nzJustify="end">
                    <button nz-button nzDanger nzType="primary" (click)="deleteLabel(label)">Delete</button>
                </nz-form-item>
            </nz-col>
        </nz-row>
        <nz-row>
            <nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>Name</nz-form-label>
                    <nz-form-control>
                        <input nz-input type="text" name="newName" placeholder="Name" [(ngModel)]="newLabel.name">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>Color</nz-form-label>
                    <nz-form-control>
                        <input nz-input type="text" name="newColor" placeholder="#FF0000" [(ngModel)]="newLabel.color">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col [nzSpan]="1">
                <nz-form-item>
                    <nz-form-control>
                        <i nz-icon nzType="highlight" nzTheme="fill" [style.color]="newLabel.color"></i>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col [nzSpan]="7">
                <nz-form-item>
                    <nz-form-control>
                        <button nz-button nzType="primary" [disabled]="loading" [nzLoading]="loading"
                                (click)="createLabel()"><i nz-icon nzType="plus" nzTheme="outline"></i>Add</button>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
        </nz-row>
    </form>
</div>
<div *nzModalFooter>
    <button nz-button [disabled]="loading" [nzLoading]="loading"
            (click)="_modal.destroy()">Close
    </button>
    <button nz-button nzType="primary" *ngIf="project.permissions.writable" [disabled]="loading"
            [nzLoading]="loading" (click)="saveLabels(true)">
        Save
    </button>
</div>

